<template>
  <div class="yearPicker" contenteditable ref="yearPicker" @mouseenter="onmouseover" @mouseleave="onmouseleave">
    <i class="el-icon-date mr8 "></i>
    <el-date-picker
        ref="datePicker1"
        @focus="yearPickerFocus"
        @change="onChange1"
        :clearable="false"
        v-model="start_time"
        format="yyyy年"
        value-format="yyyy"
        type="year"
        :picker-options='pickerOptions.start_time'
        placeholder="开始年份">
    </el-date-picker>
    至
    <el-date-picker
        ref="datePicker2"
        @focus="yearPickerFocus"
        @change="onChange2"
        :clearable="false"
        v-model="end_time"
        format="yyyy年"
        value-format="yyyy"
        type="year"
        :picker-options='pickerOptions.end_time'
        placeholder="结束年份">
    </el-date-picker>
    <i v-show="start_time && end_time && hover" class="el-icon-circle-close ml8 c-b2 close mt2" @click="clear"></i>
  </div>
</template>

<script>
import {throttle} from "@/utils"
export default {
    data(){
        return{
            start_time:null,
            end_time:null,
            hover: false,
            pickerOptions:{
                start_time:{
                    disabledDate: (time) => {
                        return time.getFullYear() > new Date().getFullYear()
                    }
                },
                end_time:{
                    disabledDate: (time) => {
                        return time.getFullYear() > new Date().getFullYear()
                    }
                },
            },
        }
    },
    mounted(){
        const dataIcon = document.querySelectorAll('.el-icon-date')
        dataIcon[1].remove()
        dataIcon[2].remove()
    },
    methods:{
        onmouseover: throttle(function(){
            this.hover = true
        },200),
        onmouseleave(){
            this.hover = false
        },
        yearPickerFocus(e){
            this.$refs.yearPicker.focus()
        },
        clear(){
            this.start_time = null
            this.end_time = null
            this.$emit("onChange",{start_time:this.start_time,end_time:this.end_time})
        },
        onChange1(){
            this.changeDate()
            if(!this.end_time){
                this.$refs.datePicker2.focus()
            }else{
                this.$emit("onChange",{start_time:this.start_time,end_time:this.end_time})
            }
        },
        onChange2(){
            this.changeDate()
            if(!this.start_time){
                this.$refs.datePicker1.focus()
            }else{
                this.$emit("onChange",{start_time:this.start_time,end_time:this.end_time})
            }
        },
        changeDate(){
            this.pickerOptions = {
                start_time:{
                    disabledDate: (time) => {
                        if (this.end_time) {
                          return (time.getFullYear() > new Date(this.end_time).getFullYear() );
                        }else{
                            return time.getFullYear() > new Date().getFullYear()
                        }
                    }
                },
                end_time:{
                    disabledDate: (time) => {
                        if (this.start_time) {  // 开始日期
                          return (time.getFullYear() < new Date(this.start_time).getFullYear() || time.getFullYear() > new Date().getFullYear());
                        }else{
                          return time.getFullYear() > new Date().getFullYear()
                        }
                    }
                },
            }
        },
    }
}
</script>

<style lang='less' scoped>
.yearPicker{
    width: 240px;
    height:40px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    padding: 0 16px 0 8px;
    display: flex;
    align-items: center;
    position: relative;
    .close{
        position: absolute;
        right: 8px;
        cursor: pointer;
    }
    .el-date-editor.el-input, .el-date-editor.el-input__inner{
        height: 100%;
    }
    /deep/.el-input__inner {
        border: none;
        height: 100%;
        padding: 0;
        text-align: center;
        line-height: 35px;
        cursor: pointer;
    }
    
}
.yearPicker:focus {
    border-color: #409eff;
    caret-color: transparent;
}
.mt2{
    margin-top: 2px;
}
</style>